<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>{$all['name']}</title>
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=yes" name="format-detection" />
    <link rel="stylesheet" href=/static/css/common.css?v=2016">
<body class="white-bg">
<!-- main area -->
<div class="run-main rl-main">
    <!--战力榜 header-->
    <div class="rl-head">
        <div class="rl-time">
            {if $type == 'week'}
            <h3>{$all['year']}年 <i>{$all['week']}</i>周</h3>
            <a id="ic-color" href="javascript:;" style="display:block;color:#afcbdb;height:16px;font-size: 14px;line-height: 16px;width:100%;">{$all['dateRange']}</a>
            {else}
            <h3 class="rl-month">{$all['year']}年 <i>{$all['month']}</i>月</h3>
            {/if}
        </div>
        <ul class="sel-area">
            <li><i class="ic-rank"></i><span>排行榜</span></li>
            <li><i class="ic-record"></i><span>记录</span></li>
            <li class="cur"><i class="ic-d"></i><span>概况</span></li>
        </ul>
    </div>
    <div class="rl-conts">
        <!--排行榜-->
        <div class="rl-cont">
            {if $topThree['one']['nickname']}
            <div class="rks-header">
                <div class="rks-h" data-rank="2">
                    <code class="rks-by"><img src="{$topThree['two']['header']}"/></code>
                    <p>{$topThree['two']['nickname']}</p>
                </div>
                <div class="rks-h" data-rank="1">
                    <code class="rks-bj"><img src="{$topThree['one']['header']}"/></code>
                    <p>{$topThree['one']['nickname']}</p>
                </div>
                <div class="rks-h" data-rank="3">
                    <code class="rks-bt"><img src="{$topThree['three']['header']}"/></code>
                    <p>{$topThree['three']['nickname']}</p>
                </div>
            </div>
            <ul class="rks-cont">
                {loop $rankings $k $v}
                <li>
                    <code class="rks-index">{eval echo $k+1}</code>
                    <div class="rks-m">
                        <img class="rks-img" src="{$v['header']}"/>
                        <div class="rks-info">
                            <p><span>{$v['nickname']}</span><img style="width:18px;height:18px;display:inline-block;margin-left:2px;" class="ic-icon" src="http://irun.hupu.com/static/backend/level_modal/level_{$v['level']}.png"></p>
                            <p class="rks-count">里程：{$v['mileage']}km</p>
                        </div>
                    </div>
                </li>
                {/loop}
            </ul>
            {else}
            <img class="empty01_img" src="{$staticHost}img/group/empty_02.jpg"/>
            {/if}
        </div>
        <!--记录-->
        <div class="rl-cont">
            {if $bestRecord}
            <ul class="rk-records">
                {loop $bestRecord $k $v}
                <li>
                    <div class="rk-m">
                        <img src="{$v['header']}"/>
                        <p class="rk-num">{$v['value']}</p>
                    </div>
                    <div class="rk-mk">
                        <p><span>{$v['nickname']}</span></p>
                        <p class="rk-blue"><span>{$v['record']}</span></p>
                    </div>
                    <cite>创造</cite>
                </li>
                {/loop}
            </ul>
            {else}
            <img class="empty01_img" src="{$staticHost}img/group/empty_02.jpg"/>
            {/if}
        </div>
        <!--概况-->
        <div class="rl-cont contcur">
            <!--月份部分 module start-->
            {if $type == 'month'}
            <div class="rl-goal">
                <div class="rl-gcont">
                    <p>本月群目标</p>
                    <p class="rl-num-blue">{$all['GTarget']}<cite>km</cite></p>
                </div>
                <div class="rl-gcont">
                    <p>目标达成</p>
                    <p class="rl-num-blue">{$all['GRate']}</p>
                </div>
            </div>
            {/if}
            <!--月份部分 module end-->
            <ul class="rm-ul">
                <!--周 module start-->
                {if $type == 'week'}
                <li><i>目标完成度</i><span>{$all['GRate']}</span></li>
                <li><i>本周跑量</i><span>{$all['totalRun']}<cite>km</cite></span></li>
                <li><i>本周跑步次数</i><span>{$all['times']}</span></li>
                <li><i>本周跑步人数</i><span>{$all['totalUser']}</span></li>
                <!--周 module end-->
                {else}
                <li><i>本月跑量</i><span>{$all['totalRun']}<cite>km</cite></span></li>
                <li><i>本月跑步次数</i><span>{$all['times']}</span></li>
                <li><i>本月跑步人数</i><span>{$all['totalUser']}</span></li>
                {/if}
            </ul>
        </div>
    </div>
    {if $all['totalRun'] > 0}
    <div class="r-footer">
        <p>和我一起跑，下载 <a class="ic-blue" href="http://mobile.hupu.com/download/joggers?r=share">虎扑跑步APP</a></p>
    </div>
    {/if}
</div>
<script src="{$staticHost}js/zepto.min.js"></script>
<script src="{$staticHost}js/touch.js"></script>
<script>
    var nav_sel = $('.sel-area li');
    nav_sel.on('tap', function () {
        $(this).addClass('cur').siblings().removeClass('cur');
        $('.rl-cont').eq(nav_sel.index(this)).addClass('contcur').siblings().removeClass('contcur');
    });
    $('#ic-color').css('color','#afcbdb');
</script>
</body>
</html>